<template>
  <div v-if="data !== undefined" id="index">
    <el-row>
      <el-col :span="24">
        <el-tabs v-model="activeTab">
          <el-tab-pane label="全部商品" name="all">
            <el-row style="font-size: 14px;">
              <el-col :span="12">商品信息</el-col>
              <el-col :span="3">单价</el-col>
              <el-col :span="3">数量</el-col>
              <el-col :span="3">金额</el-col>
              <el-col :span="3">操作</el-col>
            </el-row>
            <el-row v-for="(item,index) in (data.cartList || [])" :key="index" style="height:130px;background-color: #fcfcfc;border: 1px solid #cccccc;padding: 15px;margin-top: 20px;">
              <el-col :span="12" style="height: 100%;">
                <el-row style="height: 100%;">
                  <el-col :span="1"><el-checkbox v-model="item.checked" /></el-col>
                  <el-col :span="5" style="height: 100%;">
                    <el-image style="width: 100%;height: 100%;margin-left: 10px;" fit="cover" :src="item.picUrl" />
                  </el-col>
                  <el-col :span="16" :offset="1">{{ item.goodsName }}</el-col>
                </el-row>
              </el-col>
              <el-col :span="3" class="row-line-text">
                ￥{{ item.price }}
              </el-col>
              <el-col :span="3" class="row-line-text">
                <el-input-number v-model="item.number" :min="1" size="mini" @change="numChange(item)" />
              </el-col>
              <el-col :span="3" class="row-line-text" style="color: #ff4400">￥{{ item.price * item.number }}</el-col>
              <el-col :span="3" class="row-line-text">
                <el-button type="text" @click="del(item.productId)">删除</el-button>
              </el-col>
            </el-row>
            <el-row style="margin-top: 20px;height: 30px;">
              <el-col :span="16">
                <!--                <el-checkbox style="margin-right: 30px;">全选</el-checkbox>-->
                <el-button type="text" @click="delAll">删除</el-button>
              </el-col>
              <el-col :span="8" style="text-align: right;">
                <span style="vertical-align: middle;font-size: 14px;">合计：</span>
                <span style="font-size: 24px;color: #ff4400;font-weight: bold;vertical-align: middle;">{{ data.cartTotal.checkedGoodsAmount }}</span>
                <el-button style="width: 100px;height: 100%;margin-left: 20px;" @click="$router.push('/theme1/orderView?cartId=0')">结算</el-button>
              </el-col>
            </el-row>
          </el-tab-pane>
        </el-tabs>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { index, remove, update } from '@/api/webSite/ApiCart'
export default {
  name: 'Index',
  data() {
    return {
      activeTab: 'all',
      data: undefined
    }
  },
  mounted() {
    this.init()
  },
  methods: {
    init() {
      index().then(res => {
        this.data = res.data.data
      })
    },
    del(id) {
      remove({ productIds: id }).then(() => {
        this.init()
      })
    },
    delAll() {
      const ids = this.data.cartList.map(car => car.productId)
      this.del(ids.join(','))
    },
    numChange(item) {
      update({ id: item.id, goodsId: item.goodsId, productId: item.productId, number: item.number }).then(() => {
        this.init()
      })
    }
  }
}
</script>

<style scoped>
#index {
  width: 100%;
}
.row-line-text {
  height: 100px;
  line-height: 100px;
}
</style>
